<template>
  <div>

    <div class="backcolor">
      <div class="md-subhead">
        <yd-flexbox class="dateleft">
          |{{day}}|<ul style="font-size:.25rem;font-weight:500;"><li>{{year}}</li><li>{{monthEng}}</li></ul>|葫芦纪念
          <div  class="dateright">
            <yd-flexbox style="padding:2px">
              <yd-flexbox-item style="font-size:10px">历历<br>在目</yd-flexbox-item>
              <yd-flexbox-item>
                <div class="dateicon"  @click="openByDrop($event)" :v-model = "calendar3.display">
                  <hd-svg-icon name="hd-rili" slot="left" size="30px" color="#ffffff" style="margin-bottom: 3px;"></hd-svg-icon>
                </div>
              </yd-flexbox-item>
          </yd-flexbox>
          </div>
        </yd-flexbox>
      </div>
      <div  style="height: 400px">
        <!-- swiper1 -->
        <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
          <swiper-slide v-for="lunbotu in imagesdata" :key="lunbotu.index">
            <div class="swiperback">
              <router-link :to="{path:'boutiquelinedetail',query: {id:lunbotu.id}}">
                <img :src="lunbotu.image" alt="" srcset="" class="topimg">
              </router-link>
              <div class="textinfo">
                <div class="textinfo0">北欧四国 | 雪夜星空, 遇见你便...</div>
                <div class="textinfo1">我是阿珊0v0 我在北欧</div>
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
          <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        </swiper>
        <!-- swiper2 Thumbs -->
        <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
          <swiper-slide v-for="lunbotu in imagesdata" :key="lunbotu.index">
            <img :src="lunbotu.image" alt="" srcset="" class="bottomimg">
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>
      <div class="notesinfo" v-for="item in list" :key="item.index" slot="list">
        <router-link :to="{path:'boutiquelinedetail',query: item}">
          <div>
            <div class="imgsize">
              <img :src="item.image" alt="" srcset="" class="infoimg">
              <div class="keyuding" v-if="item.book == '0'">可预订</div>
            </div>
          </div>
          <div class="textsize">
            <div class="title" style="height:20%">{{item.title}}</div>
            <yd-flexbox class="gerenxinxi" style="height:40%">
                <div style="width:20%"><img src="http://img1.3lian.com/2015/a1/43/d/152.jpg" alt="" srcset="" class="touxiangimg"></div>
                <div style="width:30%" class="namestyle">EricLee</div>
                <div style="width:50%" class="gerenxinxi1">在<span style="color:#FF8000">{{item.destination}}</span></div>
            </yd-flexbox>
            <div style="height:40%">
              <div class="iconbottom">
                <div style="float:left;margin-left:5%;">
                  <hd-svg-icon name="hd-chakan" slot="left" size="20px" color="#ffffff"></hd-svg-icon>
                  <span style="text-align:center;font-size:.3rem;margin-left:3px;">58</span>
                </div>
                <div style="float:left;margin-left:5%;">
                  <hd-svg-icon name="hd-pinglun" slot="left" size="20px" color="#4F4F4F"></hd-svg-icon>
                  <span style="text-align:center;font-size:.3rem;margin-left:3px;">3</span>
                </div>
              </div>
            </div>
          </div>
        </router-link>
      </div>
      <!-- 数据全部加载完毕显示 -->
      <span slot='doneTip'>啦啦啦，啦啦啦，没有数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <img slot='loadingTip' src='http://static.ydcss.com/uploads/ydui/loading/loading10.svg'/>
    </yd-infinitescroll>

    <div>
      <transition name = "fade">
        <div class = "calendar-dropdown" :style = "{'left':calendar3.left   +   'px','top':calendar3.top   +   'px'}" v-if = "calendar3.show">
            <calendar :zero = "calendar3.zero" :lunar = "calendar3.lunar" :value = "calendar3.value" :begin = "calendar3.begin" :end = "calendar3.end" @select = "calendar3.select"></calendar>
        </div>
      </transition>
    </div>

  </div>
</template>

<script>
import calendar from './boutiquecalendar.vue';

export default {
  name: 'boutiquelineindex',
  components: {
    calendar
  },
  data() {
    return {
      swiperOptionTop: {
        notNextTick: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 20
      },
      swiperOptionThumbs: {
        notNextTick: true,
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
        // loop: true
      },
      data: {},
      year: '',
      month: '',
      day: '',
      create_time: '',
      pageNo: 1,
      pageSize: 5,
      list: [],
      monthEng: '',
      monthInEng: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'],
      imagesdata: [],
      calendar3: {
        display: '',
        show: false,
        zero: true,
        value: [], // 默认日期
        lunar: true, // 显示农历
        select: (value) => {
          console.log(value);
          console.log(value.toString());
          this.calendar3.show = false;
          // this.calendar3.value = value;
          this.calendar3.display = value.join('-');
          this.year = value[0];
          this.month = value[1];
          var monthInEng1 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'];
          this.monthEng = monthInEng1[this.month];
          this.day = value[2];
          this.create_time = this.calendar3.display;
          this.$router.push({path: 'boutiquelineindex', query: {create_time: this.create_time, year: this.year, month: this.month, day: this.day}});
          location.reload();
        }
      }
    }
  },
  mounted() {
    console.log(this.$route.query.year);
    const swiperTop = this.$refs.swiperTop.swiper
    const swiperThumbs = this.$refs.swiperThumbs.swiper
    swiperTop.params.control = swiperThumbs
    swiperThumbs.params.control = swiperTop
    this.date = new Date()
    this.calendar3.value = [this.date.getFullYear(), this.date.getMonth() + 1, this.date.getDate()];
    this.calendar3.display = this.calendar3.value.join('-');
    if (this.$route.query.day === undefined) {
      this.year = this.date.getFullYear();
      this.month = this.date.getMonth() + 1;
      this.monthEng = this.monthInEng[this.month - 1]
      this.day = this.date.getDate();
    } else {
      this.year = this.$route.query.year;
      this.month = this.$route.query.month;
      this.monthEng = this.monthInEng[this.month - 1]
      this.day = this.$route.query.day;
      console.log('~~~~~~~天~~~~~~');
    }
    if (this.$route.query.create_time === undefined) {
      this.create_time = this.calendar3.display;
    } else {
      this.create_time = this.$route.query.create_time;
    }
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.findLineList,
        data: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          create_time: this.create_time
        },
        success: (resultData) => {
          console.log(resultData);
          const _list = resultData.data.results;
          this.list = [...this.list, ..._list];
          if (_list.length < this.pageSize) {
            /* 所有数据加载完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.pageNo++;
        }
      });
      this.hdAjax({
        url: this.API.findByUserList,
        success: (resultData) => {
          for (var i = 0; i < resultData.data.length; i++) {
            if (i < 5) {
              this.imagesdata.push(resultData.data[i]);
            }
          }
          // this.imagesdata = resultData.data;
        }
      })
    },
    openByDrop (e) {
      this.calendar3.show = true;
      this.calendar3.left = e.target.offsetLeft + 19;
      this.calendar3.top = e.target.offsetTop + 70;
      e.stopPropagation();
      window.setTimeout(() => {
        document.addEventListener('click', (e) => {
          this.calendar3.show = false;
          document.removeEventListener('click', () => {}, false);
        }, false);
      }, 1000)
    }
  }
}
</script>

<style scoped>
  /* .swiper-container {
     background-color: #218B98;
  } */
  .backcolor{
    height: 460px;
    /* background-color: #218B98; */
    background: linear-gradient(to right top, 	#218B98,	#1AFD9C); /* 标准的语法 */
  }
  .swiper-slide {
    background-size: cover;
    background-position: center;
  }
  .gallery-top {
    height: 330px;;
    width: 96%;
    margin-left: 2%;
    z-index: 0;
  }
  .gallery-thumbs {
    height: 50px;
    /* box-sizing: border-box; */
    padding: 10px 0;
  }
  .gallery-thumbs .swiper-slide {
    width: 50px;
    height: 50px;
    opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
  .md-subhead{
    height: 60px;
  }
  .dateleft{
    font-size: .6rem;
    margin-left: 20px;
    width: 100%;
    color: #fff;
    /* margin-top: 10px; */
  }
  .bottomnotes{
    height: 250px;
  }
  .topimg{
    width: 100%;
    height: 250px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .bottomimg{
    height:50px;
    width: 100%;
  }
  .textinfo{
    text-align: center;
    font-size: .35rem;
    font-weight:900;
    /* padding-bottom: 20px; */
    border-radius: 10px;
  }
  .textinfo0{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  .textinfo1{
    padding-bottom: 15px;
  }
  .dateright{
    float: right;
    width: 25%;
    height: 40px;
    border: 1px solid #333333;
    margin-top: 10px;
    text-align: center;
    background-color: #333333;
    border-radius: 20px;
    margin-left: 10%;
    margin-right: 5%;
  }
  .datetext{
    font-size:.10rem;
    float:left;
    /* height: 30px; */
    width: 30%;
    margin-left: 15%;
    margin-top: 5px;
    color: #ffffff;
    font-weight:900;
  }
  .dateicon{
    float:right;
    margin-right:15%;
    height:5%;
    /* margin-top: 5px; */
  }
  .swiperback{
    /* margin-top: 10px; */
    border-radius: 10px;
    background-color: #ffffff;
  }
  .infoimg{
    width: 100%;
    height: 100px;
  }
  .notesinfo{
    margin-top: 10px;
  }
  .imgsize{
    float: right;
    width: 55%;
    height: 100px;
    position:relative;
  }
  .textsize{
    width: 45%;
    height: 105px;
  }
  .title{
    font-size: .35rem;
    font-weight:900;
    margin-left: 5%;
    margin-right: 5%;
  }
  .touxiangimg{
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  .gerenxinxi{
    margin-left: 5%;
    margin-right: 5%;
  }
  .gerenxinxi1{
    float: right;
    margin-left: 10px;
    font-size:.3rem;
    /* height: 10px; */
  }
  .namestyle{
    margin-top:20px;
    margin-left:5%;
    padding-bottom:20px;
    font-size:.26rem;
  }
  .iconbottom{
    height: 40px;
    border-bottom: 1px solid #999999;
    margin-left:5%;
    margin-right:5%;
  }
  .flex {
  box-sizing: border-box;

  display: -webkit-box;
  -webkit-box-pack: start;
  -webkit-box-align: start;

  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: top;

  display: flex;
  justify-content: space-between;
  align-items: top;
  flex-flow: row wrap;
}
.flex > div {
  margin: 10px;
  padding: 20px;
  width: 25%;
  min-width: 300px;
  border: 1px solid #eee;
  border-radius: 2px;
  position: relative;
}
.flex > div > span {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 2px 10px;
  font-size: 10px;
  border-radius: 0 0 2px 0;
  background: #ea6151;
  color: #fff;
}
.flex > div > input {
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
  border-radius: 2px;
  border: 1px solid #dedede;
  padding: 10px;
  font-size: 16px;
  background: url( +
      PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwpAZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IGlmb250OyBzcmM6IHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDQyMzczODk2XzQ3NTQ0NTUuZW90PyNpZWZpeCIpIGZvcm1hdCgiZW1iZWRkZWQtb3BlbnR5cGUiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzE0NDIzNzM4OTZfNDc1NDQ1NS53b2ZmIikgZm9ybWF0KCJ3b2ZmIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDQyMzczODk2XzQ3NTQ0NTUudHRmIikgZm9ybWF0KCJ0cnVldHlwZSIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTQ0MjM3Mzg5Nl80NzU0NDU1LnN2ZyNpZm9udCIpIGZvcm1hdCgic3ZnIik7IH0KCl1dPjwvc3R5bGU +
      PC9kZWZzPjxnIGNsYXNzPSJ0cmFuc2Zvcm0tZ3JvdXAiPjxnIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUsIDAuMDE1NjI1KSI +
      PHBhdGggZD0iTTcxMS4zMDYyIDI5MC42OTcyYzI0LjI4MjEgMCA0NS4zNzY1LTE5LjcwNjkgNDUuMzc2NS00NC4wMzJWNDYuNTYwMjU1OTk5OTk5OTk1YzAtMjQuMzI1MS0yMS4wOTU0LTQ0LjA1MzUtNDUuMzc2NS00NC4wNTM1LTI0LjMwMjYgMC00My45ODggMTkuNzI4NC00My45ODggNDQuMDUzNXYyMDAuMTA0OTZDNjY3LjMxODMgMjcwLjk5MDMgNjg3LjAwMzYgMjkwLjY5NzIgNzExLjMwNjIgMjkwLjY5NzJ6TTYyMy40ODA4IDExMy40MjAzSDQwMC43NjQ5Mjh2NjYuNTEzOTJoMjIyLjcxNTkwNDAwMDAwMDAyVjExMy40MjAyODh6TTg4NC4wNTMgMTEzLjQyMDNoLTgyLjc3NDAxNnY2Ni4xNDUyOGg4NS45NDAyMjRjMjUuMjc4NSAwIDQ2LjYxMTUgMjEuMzc2IDQ2LjYxMTUgNDYuNjc3djE1My45Mjc2OEg5MC40Mzg2NTYwMDAwMDAwMXYtMTUzLjkyNzY4YzAtMjUuMyAyMS4zMzMtNDYuNjc3IDQ2LjYxMTUtNDYuNjc3aDg2LjUwMzQyNFYxMTMuNDIwMjg4aC04Mi42NDI5NDRjLTY0LjA4NiAwLTExNi41MDc2IDUyLjUwODctMTE2LjUwNzYgMTE2LjcwMzJ2Njc2LjgwMTUzNTk5OTk5OTljMCA2NC4xNzQxIDUwLjQ5MTQgMTE2LjY4MDcgMTE0LjU3NzQgMTE2LjY4MDdIODg0LjA1Mjk5MmM2NC4wNjI1IDAgMTE2LjUwNjYtNTIuNTA2NiAxMTYuNTA2Ni0xMTYuNjgwN1YyMzAuMTIzNTE5OTk5OTk5OThDMTAwMC41NTk2IDE2NS45MjkgOTQ4LjExNDQgMTEzLjQyMDMgODg0LjA1MyAxMTMuNDIwM3pNOTMzLjgyOTYgOTEwLjM1MTRjMCAyNS4zLTIxLjMzMyA0Ni42NzYtNDYuNjExNSA0Ni42NzZIMTM3LjA1MDExMTk5OTk5OTk4Yy0yNS4yNzg1IDAtNDYuNjExNS0yMS4zNzYtNDYuNjExNS00Ni42NzZWNDQ2LjQ0NTU2OEg5MzMuODI5NjMyVjkxMC4zNTEzNnpNMjY3LjEwODQgNjQ2LjE4MTljMzYuODc3MyAwIDY2Ljc1MjUtMjkuOTM5NyA2Ni43NTI1LTY2Ljg4MTUgMC0zNi45MjI0LTI5Ljg3NTItNjYuODYxMS02Ni43NTI1LTY2Ljg2MTEtMzYuODU0OCAwLTY2Ljc1MjUgMjkuOTM5Ny02Ni43NTI1IDY2Ljg2MTFDMjAwLjM1NTggNjE2LjI0MjIgMjMwLjI1MjUgNjQ2LjE4MTkgMjY3LjEwODQgNjQ2LjE4MTl6TTUxMS41NDg0IDY0Ni4xODE5YzM2Ljg1NTggMCA2Ni43NTI1LTI5LjkzOTcgNjYuNzUyNS02Ni44ODE1IDAtMzYuOTIyNC0yOS44OTU3LTY2Ljg2MTEtNjYuNzUyNS02Ni44NjExLTM2Ljg3NzMgMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44NjExQzQ0NC43OTU5IDYxNi4yNDIyIDQ3NC42NzExIDY0Ni4xODE5IDUxMS41NDg0IDY0Ni4xODE5ek0yNjUuOTE2NCA4OTAuNzA5YzM2Ljg3NzMgMCA2Ni43NTE1LTI5LjkzOTcgNjYuNzUxNS02Ni44NjExIDAtMzYuOTQyOC0yOS44NzQyLTY2Ljg4MjYtNjYuNzUxNS02Ni44ODI2LTM2Ljg1NTggMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44ODI2QzE5OS4xNjM5IDg2MC43NjkzIDIyOS4wNTk2IDg5MC43MDkgMjY1LjkxNjQgODkwLjcwOXpNNTExLjU0ODQgODkwLjcwOWMzNi44NTU4IDAgNjYuNzUyNS0yOS45Mzk3IDY2Ljc1MjUtNjYuODYxMSAwLTM2Ljk0MjgtMjkuODk1Ny02Ni44ODI2LTY2Ljc1MjUtNjYuODgyNi0zNi44NzczIDAtNjYuNzUyNSAyOS45Mzk3LTY2Ljc1MjUgNjYuODgyNkM0NDQuNzk1OSA4NjAuNzY5MyA0NzQuNjcxMSA4OTAuNzA5IDUxMS41NDg0IDg5MC43MDl6TTc1NS42NDEzIDY0Ni4xODE5YzM2Ljg1NjggMCA2Ni43NTM1LTI5LjkzOTcgNjYuNzUzNS02Ni44ODE1IDAtMzYuOTIyNC0yOS44OTY3LTY2Ljg2MTEtNjYuNzUzNS02Ni44NjExLTM2Ljg3NzMgMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44NjExQzY4OC44ODk5IDYxNi4yNDIyIDcxOC43NjQgNjQ2LjE4MTkgNzU1LjY0MTMgNjQ2LjE4MTl6TTMxMS43MDM2IDI5MC42OTcyYzI0LjI4MTEgMCA0NS4zNzY1LTE5LjcwNjkgNDUuMzc2NS00NC4wMzJWNDYuNTYwMjU1OTk5OTk5OTk1YzAtMjQuMzI1MS0yMS4wOTQ0LTQ0LjA1MzUtNDUuMzc2NS00NC4wNTM1LTI0LjMwMTYgMC00My45ODkgMTkuNzI4NC00My45ODkgNDQuMDUzNXYyMDAuMTA0OTZDMjY3LjcxNDYgMjcwLjk5MDMgMjg3LjQwMiAyOTAuNjk3MiAzMTEuNzAzNiAyOTAuNjk3MnoiIGZpbGw9IiM1ZTdhODgiPjwvcGF0aD48L2c +
      PC9nPjwvc3ZnPg = =)
    no-repeat 8px 10px;
  padding-left: 36px;
  color: #666;
}

/*transition*/
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease-in-out;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateY(-10px);
}

/*下拉框*/
.calendar-dropdown {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 2px;
  width: 100%;
}
.calendar-dropdown:before {
  position: absolute;
  left: 30px;
  top: -10px;
  content: "";
  border: 5px solid rgba(0, 0, 0, 0);
  border-bottom-color: #dedede;
}
.calendar-dropdown:after {
  position: absolute;
  left: 30px;
  top: -9px;
  content: "";
  border: 5px solid rgba(0, 0, 0, 0);
  border-bottom-color: #fff;
}

/*弹出框*/
.calendar-dialog {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.calendar-dialog-mask {
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
}

.calendar-dialog-body {
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 2px;
}
.keyuding {
  padding: 2px 2px 2px 2px;
  position: absolute;
  top: 0;
  width: 40px;
  height: 20px;
  right: 0;
  background-color: #FFA500;
  color: white;
}
</style>